<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="marginTop">
				<image src="/static/logo.png" mode="widthFix" class="logo"></image>
			</view>
			<form @submit="loginNow" class="grace-form" style="margin-top:120rpx;">
				<view class="grace-form-item grace-border-b">
					<view class="grace-pnper">
						<picker :value="pnpre" @change="changePre" :range="pnpres" name="pn_pre" style="text-align:left;">
							<text class="grace-text">+{{pnpres[pnpre]}}</text><text class="grace-text grace-icons icon-arrow-down" style="margin-left:10rpx;"></text>
						</picker>
					</view>
					<view class="grace-form-body">
						<input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">短信验证码</text>
					<view class="grace-form-body">
						<input type="number"  class="grace-form-input" name="code" placeholder="请输入验证码" />
					</view>
					<view class="login-sendmsg-btn grace-bg-blue grace-border-radius" @tap="getVCode">{{vcodeBtnName}}</view>
				</view>
				<view class="grace-margin-top">
					<button form-type="submit" type="primary" class="grace-button grace-border-radius login">
						登录 <text class="grace-icons icon-arrow-right"></text>
					</button>
				</view>
			</form>
			<!-- 第三方登录 -->
			<view style="position:fixed; left:25rpx; bottom:100rpx; width:700rpx;" v-if="false">
				<view class="grace-line-title grace-margin-top">
					<view class="grace-line-title-line"></view>
					<text class="grace-line-title-text">第三方登录</text>
					<view class="grace-line-title-line"></view>
				</view>
				<view class="grace-margin-top grace-nowrap grace-flex-center">
					<!-- #ifdef MP-WEIXIN -->
						<text class="grace-login-three-items grace-icons icon-weixin grace-green" @tap="loginWithWx"></text>
					<!-- #endif -->
					<!-- #ifdef MP-BAIDU -->
						<text class="grace-login-three-items grace-blue hd-icon">&#xe602;</text>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "@/graceUI/components/gracePage.vue";
	var graceChecker = require("@/graceUI/jsTools/graceChecker.js");
	import { sendMobileCode,setAuth,getAuth,login,setAuthFace  } from '@/api/user';
	export default {
		data() {
			return {
				pnpre: 0,
				pnpres: ['86'],
				vcodeBtnName: "获取验证码",
				countNum: 60,
				countDownTimer: null,
				phoneno: '',
			}
		}, 
		onLoad(){
		},
		methods: {
			loginWithWx: function() {
				uni.login({
					provider:'weixin',
					scopes:'auth_base',
					success:(res)=>{
					},
					fail:(res)=>{
					}
				})
				/* uni.showToast({
					title: "请完善登录功能",
					icon: "none"
				}) */
			},
			changePre: function(e) {
				this.pnpre = e.detail.value;
			},
			loginNow: function(e) {
				// 表单验证
				var rule = [{
						name: "pn",
						checkType: "phoneno",
						errorMsg: "请填写正确的手机号"
					},
					{
						name: "code",
						checkType: "string",
						checkRule: "4",
						errorMsg: "请正确填写短信验证码"
					},
				];
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				// 验证通过
				if (checkRes) {
					login(formData.code,formData.pn).then((res)=>{
						uni.showToast({
							title: res.data.msg, 
							icon: "none"
						});
						if(res.data.status==1){
							setAuthFace(res.data.datas.face)
							uni.reLaunch({
								url:'./index'
							})
						}
					})
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			getVCode: function() {
				var myreg = /^[1][1,2,3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.phoneno)) {
					uni.showToast({
						title: '请正确填写手机号码',
						icon: "none"
					});
					return false;
				}
				// 手机号码为 :  this.phoneno
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				uni.showToast({
					title: '短信已发送，请注意查收',
					icon: "none"
				});
				sendMobileCode(this.phoneno).then((res)=>{
					let datas= res.data;
					uni.showToast({
						title: datas.msg,
						icon: "none"
					});
					if(datas.status==1){
						setAuth(datas.session_id,this.phoneno)
					}
				})
				// 倒计时
				this.countNum = 60;
				this.countDownTimer = setInterval(function() {
					this.countDown();
				}.bind(this), 1000);
			},
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
			reg: function() {
				wx.showToast({
					title: "注册页面类似登录，请自行完善 (:",
					icon: "none"
				});
			}
		},
		components: {
			gracePage
		}
	}
</script>
<style>
	.marginTop {
		margin-top: 100rpx;
	}

	.logo {
		width: 300rpx;
		height: 80rpx
	}

	.login-sendmsg-btn {
		height: 60rpx;
		width: 200rpx;
		flex-shrink: 0;
		margin-left: 30rpx;
		text-align: center;
		background-color: #fd8197 !important;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.grace-pnper {
		width: 168rpx;
		flex-shrink: 0;
	}

	.grace-form-label {
		width: 168rpx;
	}

	.grace-form-input {
		text-align: left;
		font-size: 28rpx;
	}

	.grace-form-item {
		padding: 10rpx 0;
	}

	.grace-login-three-items {
		display: block;
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 60rpx;
		color: #3688FF;
		text-align: center;
		margin: 10rpx;
	}
	.login{
		border:none !important;
		color:#fff !important;
		background: linear-gradient(90deg, #ff5777, #ad0b4b) !important;
	}
</style>
